<template>
	<div class="user-detail-container" v-if="sharedStateContact.currentFriend">
		<view class="rqud">
			<view class="ud1">
				<view class="ud1a">发送添加好友申请</view>
				<textarea class="ud1b udfs" v-model="sqtext"/>
			</view>
			<view class="ud1">
				<view class="ud1a">设置备注</view>
				<input class="ud1b udbz" />
			</view>
			<view class="ud1">
				<view class="ud1a">设置分组</view>
				<view class="ud1b udfz">
					
						<picker @change="bindPickerChange" :value="fzindex" :range="fzarray" style="flex: 1;">
							<view class="uni-input">{{fzarray[fzindex]}}</view>
						</picker>
					
					<i class="icon-ion-ios-arrow-right"></i>
				</view>
			</view>
			<view class="ud1 ud2">
				<view class="ud1a">设置动态权限</view>
				<view class="ud1b udfz uddt1" @click="isdtauth=0">
					<view>公开</view>
					<i class="icon-ion-checkmark-round" v-if="isdtauth===0"></i>
					<view v-else></view>
				</view>
				<view class="ud1b udfz uddt2" @click="isdtauth=1">
					<view>仅聊天</view>
					<i class="icon-ion-checkmark-round" v-if="isdtauth===1"></i>
					<view v-else></view>
				</view>
			</view>
			<view class="ud1">
				<view class="ud1b udfz uddt1">
					<view>不让她看我</view>
					<switch />
				</view>
				<view class="ud1b udfz uddt2">
					<view>我不看他</view>
					<switch />
				</view>
			</view>
			<view class="ud1">
				<view class="ud1b udbat" @click="addFriend">发送</view>
			</view>

		</view>
		<!-- <div>
			<div class="header">
				<div>
					<h2>{{ name }}</h2>
					<p>你好，野火哈哈</p>
				</div>
				<div>
					<img class="avatar" :src="sharedStateContact.currentFriend.portrait">
				</div>
			</div>
			<div class="content">
				<ul>
					<li>
						<label>{{ $t('common.alias') }}</label>
						<div class="alias">
							<input type="text" ref="input" :value="sharedStateContact.currentFriend.friendAlias" placeholder="备注名"
								@keyup.enter="updateFriendAlias" />
						</div>
					</li>
					<li>
						<label>{{ $t('common.wfc_id') }}</label>
						<p class="single-line">{{ user.name }}</p>
					</li>
					<li>
						<label>{{ $t('common.area') }}</label>
						<p>{{ $t('common.unknown') }}</p>
					</li>
					<li>
						<label>{{ $t('common.label') }}</label>
						<p>{{ $t('misc.test_user') }}</p>
					</li>
				</ul>
			</div>
			<div class="footer">
				<div class="action" @click="chat">
					<i class="icon-ion-ios-chatboxes-outline"></i>
					<a>{{ $t('message.send_message') }}</a>
				</div>
				<div class="action" @click="startAudioCall">
					<i class="icon-ion-ios-telephone-outline"></i>
					<a>语音通话</a>
				</div>
				<div class="action" @click="startVideoCall">
					<i class="icon-ion-ios-videocam-outline"></i>
					<a>视频通话</a>
				</div>
				<div v-if="!isFriend && !isSelf" class="action" @click="addFriend">
					<i class="icon-ion-person-add"></i>
					<a>添加好友</a>
				</div>
			</div>
		</div> -->
	</div>
</template>

<script>
	import store from "../../store";
	import ConversationType from "../../wfc/model/conversationType";
	import Conversation from "../../wfc/model/conversation";
	import wfc from "../../wfc/client/wfc";
	import avengineKit from "../../wfc/av/engine/avengineKit";

	export default {
		name: "UserDetailPage",
		data() {
			return {
				sharedStateContact: store.state.contact,
				user: store.state.contact.currentFriend,
				isdtauth: 0,
				fzarray: ['分组1', '分组2', '分组3', '分组4'],
				fzindex: 0,
				sqtext:''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#F5F5F5',
			})
		},
		mounted() {
			wfc.getUserInfo(this.user.uid, true);
			// uni.setNavigationBarTitle({
			//     title:this.user._displayName,
			// });
		},
		onUnload() {
			store.setCurrentFriend(null);
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.fzindex = e.detail.value
			},
			chat() {
				let conversation = new Conversation(ConversationType.Single, this.user.uid, 0);
				store.setCurrentConversation(conversation);
				this.$go2ConversationPage();
			},
			updateFriendAlias() {
				let friendAlias = this.$refs.input.value;
				if (friendAlias.trim() && friendAlias !== this.sharedStateContact.currentFriend.friendAlias) {
					wfc.setFriendAlias(this.user.uid, friendAlias, () => {
							// do nothing
							console.log('setFriendAlias success', this.user, friendAlias);
						},
						(error) => {
							// do nothing
						})
				}
			},
			addFriend() {
				let userInfo = wfc.getUserInfo(wfc.getUserId());
			//	let reason = '你好，我是' + userInfo.displayName;
				let reason = this.sqtext;
				wfc.sendFriendRequest(this.user.uid, reason, '', () => {
					uni.showToast({
						title: '好友请求发送成 ',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}, err => {
					uni.showToast({
						title: '好友请求发送失败 ' + err,
						icon: 'none'
					});
				})
			},

		},
		computed: {
			name: function() {
				let name;
				let friend = this.sharedStateContact.currentFriend;
				if (!friend) {
					return null;
				}
				if (friend.displayName) {
					name = friend.displayName;
				} else {
					name = friend.name;
				}
				console.log('sharedStateContact', this.sharedStateContact)
				return name;
			},
			isFriend() {
				return wfc.isMyFriend(this.user.uid);
			},
			isSelf() {
				return this.user.uid === wfc.getUserId();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-detail-container {
		.rqud {
			.ud1 {
				.ud1a {
					color: #BBB;
					font-family: MiSans;
					font-size: 14px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					margin-bottom: 10px;
				}

				.ud1b {
					width: 100%;
					border-radius: 10px;
					background: #FFF;
					color: #000;
					font-family: MiSans;
					font-size: 16px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					padding: 14px 24px;
					display: flex;
					align-items: center;
					height: 50px;

					i {
						color: #C0C0C1;
						margin-right: -10px;
					}

					switch {
						transform: scale(0.7);
						margin-right: -20px;
					}
				}

				.udbat {
					background: #386BF6;
					height: 46px;
					color: #ffffff;
					justify-content: center;
				}

				.uddt1 {
					border-radius: 10px 10px 0px 0px;
				}

				.uddt2 {
					border-radius: 0px 0px 10px 10px;
				}

				.udfz {
					justify-content: space-between;
				}

				.udfs {
					height: 100px;
				}

				margin-bottom: 24px;
			}

			.ud2 {
				margin-bottom: 10px;
			}
		}

		background: #F5F5F5;
		padding: 15px 12px;
	}
</style>